Berøringsgester: En omfattende guide til implementering i JavaScript

I dagens mobil-først-verden har berøringsgester blitt en integrert del av brukeropplevelsen. Fra enkle trykk til komplekse interaksjoner med flere fingre, gir berøringsgester en naturlig og intuitiv måte for brukere å interagere med webapplikasjoner. Denne omfattende guiden utforsker verdenen av berøringsgester og gir en trinnvis tilnærming til implementering i dine JavaScript-prosjekter.

Forståelse av berøringshendelser

Før vi dykker inn i gjenkjenning av gester, er det avgjørende å forstå de underliggende berøringshendelsene som driver disse interaksjonene. JavaScript tilbyr et sett med hendelser som utløses når en bruker berører skjermen. Disse hendelsene gir informasjon om berøringen, som for eksempel dens plassering og tilstand.

Grunnleggende berøringshendelser:

• touchstart: Utløses når et berøringspunkt plasseres på berøringsflaten.
• touchmove: Utløses når et berøringspunkt flyttes langs berøringsflaten.
• touchend: Utløses når et berøringspunkt fjernes fra berøringsflaten.
• touchcancel: Utløses når en berøringsinteraksjon blir avbrutt (f.eks. av et systemvarsel).

Hver av disse hendelsene inneholder en `touches`-egenskap, som er en liste over `Touch`-objekter. Hvert `Touch`-objekt representerer et enkelt kontaktpunkt på skjermen og inneholder informasjon som:

• clientX: Den horisontale koordinaten til berøringspunktet relativt til visningsområdet.
• clientY: Den vertikale koordinaten til berøringspunktet relativt til visningsområdet.
• screenX: Den horisontale koordinaten til berøringspunktet relativt til skjermen.
• screenY: Den vertikale koordinaten til berøringspunktet relativt til skjermen.
• target: DOM-elementet som ble berørt.
• identifier: En unik identifikator for berøringspunktet (nyttig for multi-touch-interaksjoner).

Eksempel: Logge berøringskoordinater

Dette enkle eksempelet demonstrerer hvordan man logger koordinatene til et berøringspunkt når brukeren berører skjermen:

            
 document.addEventListener('touchstart', function(event) {
  event.preventDefault(); // Forhindrer standard nettleseratferd (f.eks. rulling)
  let touch = event.touches[0];
  console.log('Berøring startet på X: ' + touch.clientX + ', Y: ' + touch.clientY);
 });

            

              
                Copy
              
            
          

Merk: Metoden `preventDefault()` brukes ofte for å forhindre at nettleseren utfører sin standard berøringsatferd, som rulling eller zooming.

Implementering av grunnleggende gester

Med en solid forståelse av berøringshendelser, kan vi nå implementere grunnleggende gester. La oss se på eksempler som trykk, sveip og dra. Disse vil bli forklart ved først å definere hva de er, og deretter gi JavaScript-eksempler.

Trykk-gest

En trykk-gest er en rask berøring og slipp på skjermen. For å implementere en trykk-gest, kan vi spore `touchstart`- og `touchend`-hendelsene og måle tidsforskjellen mellom dem. Hvis tidsforskjellen er under en viss terskel (f.eks. 200 millisekunder), anser vi det som et trykk.

            
 let tapStartTime = null;

 document.addEventListener('touchstart', function(event) {
  tapStartTime = new Date().getTime();
 });

 document.addEventListener('touchend', function(event) {
  let tapEndTime = new Date().getTime();
  let tapDuration = tapEndTime - tapStartTime;

  if (tapDuration < 200) {
   console.log('Trykk registrert!');
  }
 });

            

              
                Copy
              
            
          

Sveip-gest

En sveip-gest er en rask, retningsbestemt bevegelse over skjermen. For å oppdage et sveip, må vi spore start- og sluttposisjonene til berøringen og beregne avstanden og retningen på bevegelsen. Vi må også ta hensyn til varigheten av sveipet.

            
 let swipeStartX = null;
 let swipeStartY = null;

 document.addEventListener('touchstart', function(event) {
  swipeStartX = event.touches[0].clientX;
  swipeStartY = event.touches[0].clientY;
 });

 document.addEventListener('touchend', function(event) {
  let swipeEndX = event.changedTouches[0].clientX;
  let swipeEndY = event.changedTouches[0].clientY;
  let deltaX = swipeEndX - swipeStartX;
  let deltaY = swipeEndY - swipeStartY;
  let swipeDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

  if (swipeDistance > 50) { // Juster terskelen etter behov
   let angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;

   if (angle > -45 && angle <= 45) {
    console.log('Sveip til høyre!');
   } else if (angle > 45 && angle <= 135) {
    console.log('Sveip ned!');
   } else if (angle > 135 || angle <= -135) {
    console.log('Sveip til venstre!');
   } else {
    console.log('Sveip opp!');
   }
  }
 });

            

              
                Copy
              
            
          

Dra-gest

En dra-gest innebærer å berøre et element og flytte det over skjermen. For å implementere en dra-gest, må vi spore touchmove-hendelsen og oppdatere elementets posisjon tilsvarende.

            
 let dragging = false;
 let offsetX, offsetY;
 let element = document.getElementById('draggableElement');

 element.addEventListener('touchstart', function(event) {
  dragging = true;
  offsetX = event.touches[0].clientX - element.offsetLeft;
  offsetY = event.touches[0].clientY - element.offsetTop;
 });

 document.addEventListener('touchmove', function(event) {
  if (dragging) {
   element.style.left = (event.touches[0].clientX - offsetX) + 'px';
   element.style.top = (event.touches[0].clientY - offsetY) + 'px';
  }
 });

 document.addEventListener('touchend', function(event) {
  dragging = false;
 });

            

              
                Copy
              
            
          

Sørg for at du har et element med id "draggableElement" i HTML-koden din:

            
 
Dra meg!

            

              
                Copy
              
            
          

Multi-Touch-gester

Multi-touch-gester innebærer bruk av flere fingre for å interagere med skjermen. Dette muliggjør mer komplekse og uttrykksfulle interaksjoner, som klyp-for-å-zoome og rotere.

Klyp-for-å-zoome

Klyp-for-å-zoome er en vanlig gest som brukes for å zoome inn og ut av et bilde eller kart. For å implementere klyp-for-å-zoome, må vi spore avstanden mellom to berøringspunkter og justere skalaen til elementet tilsvarende.

            
 let initialDistance = null;
 let currentScale = 1;
 let element = document.getElementById('zoomableImage');

 function getDistance(event) {
  let touch1 = event.touches[0];
  let touch2 = event.touches[1];
  let x = touch2.clientX - touch1.clientX;
  let y = touch2.clientY - touch1.clientY;
  return Math.sqrt(x * x + y * y);
 }

 element.addEventListener('touchstart', function(event) {
  if (event.touches.length === 2) {
   initialDistance = getDistance(event);
  }
 });

 element.addEventListener('touchmove', function(event) {
  if (event.touches.length === 2) {
   event.preventDefault();
   let currentDistance = getDistance(event);
   let scaleFactor = currentDistance / initialDistance;
   currentScale *= scaleFactor; // Akkumuler skalering
   element.style.transform = 'scale(' + currentScale + ')';
   initialDistance = currentDistance; // Tilbakestill for neste bevegelse
  }
 });

 element.addEventListener('touchend', function(event) {
  initialDistance = null;
 });

            

              
                Copy
              
            
          

Sørg for at du har et bilde med id "zoomableImage" i HTML-koden din:

            
 

            

              
                Copy
              
            
          

Rotasjon

Rotasjon innebærer å rotere et element ved hjelp av to fingre. For å implementere rotasjon, må vi spore vinkelen mellom to berøringspunkter og rotere elementet tilsvarende.

            
 let initialAngle = null;
 let currentRotation = 0;
 let element = document.getElementById('rotatableImage');

 function getAngle(event) {
  let touch1 = event.touches[0];
  let touch2 = event.touches[1];
  return Math.atan2(touch2.clientY - touch1.clientY, touch2.clientX - touch1.clientX) * 180 / Math.PI;
 }

 element.addEventListener('touchstart', function(event) {
  if (event.touches.length === 2) {
   initialAngle = getAngle(event);
  }
 });

 element.addEventListener('touchmove', function(event) {
  if (event.touches.length === 2) {
   event.preventDefault();
   let currentAngle = getAngle(event);
   let rotation = currentAngle - initialAngle;
   currentRotation += rotation; // Akkumuler rotasjon
   element.style.transform = 'rotate(' + currentRotation + 'deg)';
   initialAngle = currentAngle; // Tilbakestill for neste bevegelse
  }
 });

 element.addEventListener('touchend', function(event) {
  initialAngle = null;
 });

            

              
                Copy
              
            
          

Sørg for at du har et bilde med id "rotatableImage" i HTML-koden din:

            
 

            

              
                Copy
              
            
          

Biblioteker for gjenkjenning av gester

Å implementere komplekse gester fra bunnen av kan være utfordrende og tidkrevende. Heldigvis finnes det flere JavaScript-biblioteker som kan forenkle prosessen med gjenkjenning av gester. Disse bibliotekene tilbyr forhåndsbygde gjenkjennere for gester og verktøy for å håndtere berøringshendelser.

Hammer.js

Hammer.js er et populært JavaScript-bibliotek for gjenkjenning av gester. Det støtter et bredt spekter av gester, inkludert trykk, dobbelttrykk, sveip, klyp, roter og panorer. Det er lett, enkelt å bruke og svært tilpassbart. Hammer.js fungerer ved å lytte til berøringshendelser og deretter bestemme hvilken handling brukeren utfører basert på plasseringen og varigheten av berøringspunktene.

            
 // Inkluder Hammer.js i HTML-koden din
 // 

 let element = document.getElementById('myElement');
 let hammer = new Hammer(element);

 hammer.on('tap', function(event) {
  console.log('Trykk-hendelse registrert');
 });

 hammer.on('swipe', function(event) {
  console.log('Sveip-hendelse registrert');
  console.log('Sveip-retning: ' + event.direction);
 });

 hammer.get('pinch').set({ enable: true });
 hammer.get('rotate').set({ enable: true });

 hammer.on('pinch', function(event) {
  console.log('Klyp-hendelse registrert');
  element.style.transform = 'scale(' + event.scale + ')';
 });

 hammer.on('rotate', function(event) {
  console.log('Roter-hendelse registrert');
  element.style.transform = 'rotate(' + event.rotation + 'deg)';
 });

            

              
                Copy
              
            
          

AlloyFinger

AlloyFinger er et annet populært JavaScript-bibliotek som spesialiserer seg på gjenkjenning av gester, spesielt for mobile enheter. Det er kjent for sin lille størrelse og gode ytelse. Det fokuserer på vanlige berøringsgester som trykk, sveip, klyp, roter og press. Det tilbyr et brukervennlig API for å binde gester til elementer.

            
 // Inkluder AlloyFinger i HTML-koden din
 //  // Erstatt med din AlloyFinger-sti

 let element = document.getElementById('myElement');
 let af = new AlloyFinger(element, {
  tap: function() {
   console.log('Trykk-hendelse registrert');
  },
  swipe: function(evt) {
   console.log('Sveip-hendelse registrert');
   console.log('Sveip-retning: ' + evt.direction); // opp, ned, venstre, høyre
  },
  pinch: function(evt) {
   console.log('Klyp-hendelse registrert');
   element.style.transform = 'scale(' + evt.scale + ')';
  },
  rotate: function(evt) {
   console.log('Roter-hendelse registrert');
   element.style.transform = 'rotate(' + evt.angle + 'deg)';
  }
 });

            

              
                Copy
              
            
          

Hensyn til tilgjengelighet

Når man implementerer berøringsgester, er det viktig å ta hensyn til tilgjengelighet for brukere med nedsatt funksjonsevne. Noen brukere kan kanskje ikke bruke berøringsgester på grunn av motoriske utfordringer. Å tilby alternative inndatametoder, som tastaturkontroller eller talekommandoer, sikrer at applikasjonen din er tilgjengelig for et bredere publikum.

• Tastaturnavigasjon: Sørg for at alle interaktive elementer kan nås og manipuleres med tastaturet.
• Skjermleserkompatibilitet: Bruk ARIA-attributter for å gi semantisk informasjon om berøringsgester til skjermlesere.
• Tilstrekkelig kontrast: Sørg for at det er tilstrekkelig kontrast mellom tekst- og bakgrunnsfarger for å gjøre grensesnittet lesbart for brukere med nedsatt syn.
• Størrelse på berøringsmål: Sørg for at berøringsmål er store nok (minst 44x44 piksler) til å være enkle å trykke på for brukere med motoriske utfordringer.

Ytelsesoptimalisering

Berøringshendelser kan være beregningsmessig krevende, spesielt når man håndterer komplekse gester. Å optimalisere koden din for ytelse er avgjørende for å sikre en jevn og responsiv brukeropplevelse.

• Bruk hendelsesdelegering: Knytt hendelseslyttere til et overordnet element i stedet for individuelle elementer for å redusere antall hendelseslyttere.
• Begrens hendelseshåndterere (Throttle): Begrens frekvensen hendelseshåndterere utføres med for å forhindre ytelsesflaskehalser.
• Bruk requestAnimationFrame: Bruk `requestAnimationFrame` for å planlegge animasjoner og oppdateringer, og sikre at de synkroniseres med nettleserens gjengivelsessyklus.
• Unngå overdreven DOM-manipulering: Minimer DOM-manipulering, da det kan være en ytelsesflaskehals.
• Test på ekte enheter: Test alltid koden din på ekte enheter for å identifisere ytelsesproblemer. Emulatorer gjenspeiler kanskje ikke ytelsen til ekte enheter nøyaktig.

Kryssnettleser-kompatibilitet

Støtten for berøringshendelser varierer mellom ulike nettlesere og enheter. Det er avgjørende å teste koden din på en rekke nettlesere og enheter for å sikre kryssnettleser-kompatibilitet. Vurder å bruke polyfills eller biblioteker som abstraherer bort nettleserforskjeller.

• Bruk Modernizr: Bruk Modernizr for å oppdage støtte for berøringshendelser og tilby reservemekanismer for nettlesere som ikke støtter berøringshendelser.
• Test på forskjellige enheter: Test koden din på en rekke enheter, inkludert smarttelefoner, nettbrett og bærbare datamaskiner med berøringsskjerm.
• Vurder Polyfills: Bruk polyfills for å tilby støtte for berøringshendelser i eldre nettlesere.

Hensyn til internasjonalisering (i18n)

Når du implementerer berøringsgester, husk å ta hensyn til internasjonalisering (i18n). Mens selve berøringsinteraksjonene generelt er språkuavhengige, bør de omkringliggende UI-elementene og tilbakemeldingsmekanismene lokaliseres for forskjellige språk og regioner.

• Tekstretning: Håndter høyre-til-venstre (RTL) språk korrekt. For eksempel kan sveipegester måtte reverseres i RTL-oppsett.
• Tall- og datoformater: Sørg for at tall og datoer som brukes i tilbakemeldinger, formateres i henhold til brukerens lokalitet.
• Kulturell sensitivitet: Vær oppmerksom på kulturelle forskjeller i tolkningen av gester. En gest som er vanlig i én kultur, kan være støtende i en annen. Undersøk og tilpass designene dine deretter.
• Tilpasningsdyktig UI: Sørg for at brukergrensesnittet kan tilpasse seg forskjellige tekstlengder når det oversettes til ulike språk. Dette kan påvirke plasseringen og størrelsen på berøringsmål.

Globale eksempler og hensyn

La oss se på hvordan berøringsgester kan brukes annerledes i ulike globale sammenhenger:

• E-handel i Asia: Mange asiatiske e-handelsapper bruker kompleks gestbasert navigasjon for produktsøking og kjøp. Vurder å tilby strømlinjeformede berøringsinteraksjoner for brukere i regioner med begrenset datatilkobling.
• Spilling i Latin-Amerika: Mobilspill er veldig populært i Latin-Amerika. Å optimalisere berøringskontroller for spill med høyt tempo er viktig for en god brukeropplevelse.
• Utdanning i Afrika: Berøringsbaserte utdanningsapper brukes til å undervise barn i skoler. Enkle og intuitive berøringsgester kan forbedre læringsopplevelsen.
• Navigasjon i Europa: Kartapper i Europa drar nytte av jevne zoom- og roteringsgester, spesielt når man utforsker historiske steder.

Konklusjon

Berøringsgester er et kraftig verktøy for å skape engasjerende og intuitive brukeropplevelser. Ved å forstå de underliggende berøringshendelsene og bruke passende teknikker for gjenkjenning av gester, kan du implementere et bredt spekter av gester i dine JavaScript-prosjekter. Husk å ta hensyn til tilgjengelighet, ytelse og kryssnettleser-kompatibilitet for å sikre at applikasjonen din fungerer godt for alle brukere. Etter hvert som teknologien utvikler seg, kan du forvente å se nye typer gester og interaksjoner. Fortsett å lære for å holde deg i forkant av digitale opplevelser.